<template>
  <a-modal popup-container=".page-container" @cancel="close" :width="660" title="自定义围栏" :visible="visible">
    <span class="content-text">
      新建：点击围栏对应编辑按钮，鼠标点击左键地图空白区域新建围栏<br />
      保存：围栏编辑完成后，鼠标点击“保存编辑”按钮进行保存<br />
      编辑：点击围栏对应编辑按钮，或鼠标选择围栏区域右键选择编辑，进入围栏编辑模式<br />
      删除：鼠标选择围栏区域右键选择删除，将会删除之前圈定围栏
    </span>
    <template #footer>
      <a-button @click="close">关闭</a-button>
    </template>
  </a-modal>
</template>

<script setup>
  import { ref } from 'vue'
  const visible = ref(false)
  const close = () => {
    visible.value = false
  }
  const open = () => {
    visible.value = true
  }
  defineExpose({
    open,
  })
</script>
<style lang="less" scoped>
  .content-text {
    line-height: 40px;
  }
</style>
